<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test rendering of sub-pixel borders</title>
    <style>
      .test {
        box-sizing: content-box;
        display: inline-block;
        margin: 5px;
        width: 80px;
        height: 80px;
        border: 1px solid green;
        background: lightgreen;
        vertical-align: top;
        text-align: center;
        line-height: 80px;
      }
    </style>
  </head>
  <body>
    <div class="test" style="width: 80px; height: 80px">&nbsp;</div>
    <div class="test" style="width: 80px; height: 80px">&nbsp;</div>
    <div class="test" style="width: 80px; height: 80px">&nbsp;</div>
    <br>
    <div class="test">&nbsp;</div>
    <div class="test" style="width: 80.5px; height: 80.5px">&nbsp;</div>
    <div class="test" style="width: 81px; height: 81px">&nbsp;</div>
    <div class="test" style="width: 81.5px; height: 81.5px">&nbsp;</div>
    <br>
    <div class="test" style="border-width: 2px">&nbsp;</div>
    <div class="test" style="border-width: 2px; width: 80.5px; height: 80.5px">&nbsp;</div>
    <div class="test" style="border-width: 2px; width: 81px; height: 81px">&nbsp;</div>
    <div class="test" style="border-width: 2px; width: 81.5px; height: 81.5px">&nbsp;</div>
    <br>
    <div class="test" style="border-width: 3px">&nbsp;</div>
    <div class="test" style="border-width: 3px; width: 80.5px; height: 80.5px">&nbsp;</div>
    <p>
      Border thickness should be floored, not rounded, with the exception of
      values below 1px where it should always round up.
    </p>
  </body>
</html>
